<template>
  <div class="pinned-container">
    <div ref="cardRef" class="card-container">
      <div v-for="card in cardInfo" :key="card.id" class="card">
        <el-card shadow="hover" style="width: 100%; min-height: 154px">
          <div class="top-container">
            <div class="card-title">
              <img :src="card.imgSrc" class="title-logo" />
              <span class="title-name" @click="handleLinkClick(card.link)">{{ card.cardTitle }}</span>
            </div>
            <el-tooltip class="item" effect="dark" content="drag to order" placement="right-start">
              <div class="spin handle">
                <el-icon><operation /></el-icon>
              </div>
            </el-tooltip>
          </div>
          <div class="card-content">
            <span>
              {{ card.cardContent }}
            </span>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted, onUnmounted } from 'vue'
import { Operation } from '@element-plus/icons-vue'

import Sortable from 'sortablejs'

interface cardInfoType {
  cardInfo: { id: number; imgSrc: string; cardTitle: string; link: string; cardContent: string }[]
}
export default defineComponent({
  components: {
    Operation
  },
  setup() {
    let cardSortable: Sortable
    const cardRef = ref()

    const state = reactive<cardInfoType>({
      cardInfo: [
        {
          id: 1,
          imgSrc:
            '',
          cardTitle: 'elementPlus',
          link: 'https://element-plus.gitee.io/#/zh-CN/component/card',
          cardContent: ' Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库'
        },

        {
          id: 2,
          imgSrc: 'https://www.tslang.cn/favicon.ico',
          cardTitle: 'typescript',
          link: 'https://www.tslang.cn/',
          cardContent: ' Typescript 是javascript类型的超集，他可以编译为纯javascript'
        },
        {
          id: 3,
          imgSrc: 'https://v3.cn.vuejs.org/logo.png',
          cardTitle: 'vue-next',
          link: 'https://v3.cn.vuejs.org/',
          cardContent: 'Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用。'
        },
        {
          id: 4,
          imgSrc: 'https://www.vitejs.net/logo.svg',
          cardTitle: 'Vitejs',
          link: 'https://www.vitejs.net/guide/',
          cardContent: ' Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验'
        },
        {
          id: 5,
          imgSrc: 'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/66c252e7859f4bb0b691dabd9989f3dc~tplv-k3u1fbpfcp-watermark.image',
          cardTitle: 'h5.dooring',
          link: 'http://h5.dooring.cn/',
          cardContent: ' H5 Page Maker, H5 Editor. | 致力于提供一套简单方便、专业可靠、无限可能的H5/PC页面制作解决方案'
        },
        {
          id: 6,
          imgSrc:
            '',
          cardTitle: 'react',
          link: 'https://zh-hans.reactjs.org/',
          cardContent: ' 无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。'
        }
      ]
    })
    // methods
    const handleLinkClick = (targetLink: string | undefined) => {
      window.open(targetLink, '_blank')
    }
    onMounted(() => {
      cardSortable = Sortable.create(cardRef.value, {
        group: 'grid',
        handle: '.handle', // handle's class
        animation: 150
      })
    })

    // 组件卸载时销毁实例
    onUnmounted(() => {
      cardSortable.destroy()
    })

    return {
      ...toRefs(state),
      cardRef,
      handleLinkClick
    }
  }
})
</script>
<style lang="stylus" scoped>
.pinned-container{

    .card-container{
        width:100%;
        display :flex;
        flex-direction :row;
        justify-content :space-around;
        align-items :center;
        flex-wrap:wrap

        .card{
            width:33%;
            min-width: 194px;
            display :flex;
            flex-direction :column;
            justify-content :center;
            align-items :flex-start;

            .top-container{
                display :flex;
                flex-direction :row;
                justify-content :space-between;
                align-items :center;
                .card-title{
                display :flex;
                flex-direction :row;
                justify-content :flex-start;
                align-items :center;
                    img{
                        width:50px;
                        height:50px;
                    }
                    .title-name{
                        display: inline-block;
                        height: 24px;
                        margin-left: 12px;
                        color: rgba(0,0,0,.85);
                        font-size: 14px;
                        line-height: 24px;
                        vertical-align: top;
                        cursor:pointer;
                    }

                }
                .spin{
                        cursor:pointer
                    }
            }

            .card-content{
                height: auto;
                overflow: hidden;
                text-overflow :ellipsis;
                color: rgba(0,0,0,.45);
                line-height: 22px;
            }
         }


    }
}
</style>
